<template>
  <view :data-theme="globPrimary">
    <u-navbar title="我的消息"
      ><view slot="right" class="navbar-btn" @click="readAllMessages">一键已读</view></u-navbar
    >
    <view class="message-wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          :activeColor="globPrimaryColor"
          ref="tabs"
          :list="tabList"
          :current="current"
          @change="change"
          :bold="false"
          :is-scroll="false"
          :offset="[18, 18]"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item"
          ><messageCourse ref="course" :value="2" @finish="finishMessages"></messageCourse
        ></swiper-item>
        <swiper-item class="swiper-item"
          ><messageComment ref="comment" :value="3" @finish="finishMessages"></messageComment
        ></swiper-item>
        <swiper-item class="swiper-item"
          ><messageSystem ref="system" :value="1" @finish="finishMessages"></messageSystem
        ></swiper-item>
        <swiper-item class="swiper-item"
          ><messageQuestion ref="question" :value="4" @finish="finishMessages"></messageQuestion
        ></swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import messageCourse from './components/message-course.vue'
import messageComment from './components/message-comment.vue'
import messageSystem from './components/message-system.vue'
import messageQuestion from './components/message-question.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    messageCourse,
    messageComment,
    messageSystem,
    messageQuestion,
  },
  data() {
    return {
      tabList: [
        {
          name: '课程提醒',
          val: 2,
          count: 0,
        },
        {
          name: '互动消息',
          val: 3,
          count: 0,
        },
        {
          name: '系统消息',
          val: 1,
          count: 0,
        },
        {
          name: '提问',
          val: 4,
          count: 0,
        },
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  onLoad() {
    this.getUnreadCount()
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 获取未读消息的数量
    getUnreadCount() {
      this.$edu.api
        .createUserMessageRead({
          operate: 0,
        })
        .then((res) => {
          const { data } = res
          this.tabList.forEach(function (item, index) {
            if (item.val == 2) {
              item.count = data.course_unread
            } else if (item.val == 3) {
              item.count = data.comment_unread
            } else if (item.val == 1) {
              item.count = data.system_unread
            } else if (item.val == 4) {
              item.count = data.question_unread
            }
          })
        })
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    // 一键读取所有消息
    readAllMessages() {
      // 执行对应组件下读取消息的方法
      if (this.current == 0) {
        this.$refs.course.readMessage(2)
      } else if (this.current == 1) {
        this.$refs.comment.readMessage(2)
      } else if (this.current == 2) {
        this.$refs.system.readMessage(2)
      } else if (this.current == 3) {
        this.$refs.question.readMessage(2)
      }
      this.finishMessages()
    },
    // 没有未读消息时取消红点
    finishMessages() {
      this.tabList[this.current].count = 0
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar-btn {
  font-size: 30rpx;
  font-weight: 400;
  color: $edu-main-color;
  padding: 10rpx;
  margin-right: 20rpx;
}
/* #ifdef MP-WEIXIN */
/deep/.u-title.data-v-41f5d90e {
  text-align: left;
}
/* #endif */

/* #ifdef MP-WEIXIN */
/deep/.u-title {
  text-align: left;
}
/* #endif */

.message-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px - var(--window-top));
  width: 100%;
  background-color: #fff;
  .u-tabs-box {
    /deep/.u-badge {
      height: 16rpx;
      width: 16rpx;
      padding: 0;
      border-radius: 50%;
      text-indent: -20000px;
    }
  }
  .swiper-box {
    flex: 1;
    /deep/.uni-swiper-wrapper {
      z-index: 981;
    }
  }
  .swiper-item {
    height: 100%;
  }
}
</style>
